<template>
	<view class="login-container">
		<view class="top-bg">
			<image src="/static/img/login_bg.png" alt="登录"></image>
		</view>
		<view class="login-form">
			<!-- 手机号登录 -->
			<uni-forms ref="phone_form" :modelValue="formData_phone" :rules="phone_rules" label-position="top"
				class="form">
				<uni-forms-item label="手机号" name="number" class="forms-item">
					<uni-easyinput v-model="formData_phone.number" type="text" placeholder="请输入手机号"
						@input="binddata('number',formData_phone.number,'phone_form')" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="pwd" class="forms-item">
					<uni-easyinput type="password" v-model="formData_phone.pwd" placeholder="请输入密码"
						@input="binddata('pwd',formData_phone.pwd,'phone_form')" />
				</uni-forms-item>
				<button @click="submit_phone_form" class="button" type="primary">登录</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '@/common/api/api.js'
	export default {
		data() {
			return {
				items: ['邮箱登录', '手机号登录', '用户名登录'],
				current: 0,
				changeBg: false,
				// 表单数据
				formData_phone: {
					number: '',
					pwd: ''
				},
				//手机号验证
				phone_rules: {
					//对手机号进行验证
					number: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							// {
							//   pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
							//   errorMessage: '请输入正确的手机号',
							// },
						]
					},
					pwd: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 3,
								maxLength: 12,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					}
				},

			}
		},
		onShow() {
			uni.removeStorageSync("Token")
			uni.removeStorageSync("userId")
		},
		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 触发提交表单【手机】
			submit_phone_form() {
				this.$refs.phone_form.validate().then(async (res) => {
					let params = {
						telPhone: res.number,
						password: res.pwd
					}
					let result = await login(params)
					uni.setStorageSync('Token', result.data.token)
					uni.setStorageSync('userId', result.data.id)
					uni.switchTab({
						url: '/pages/tabbar/home/index'
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			//取消登录
			signup() {
				console.log('取消')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		background-color: #fff;
		color: $font_color;
		height: 100vh;

		.top-bg {
			background-color: $login_bg;
			height: 40%;
			position: relative;

			image {
				width: 70%;
				height: 70%;
				position: absolute;
				bottom: 84rpx;
				left: 15%;
			}
		}

		.login-form {
			// height: calc(100% + 80rpx);
			position: relative;
			top: -80rpx;
			border-radius: 60rpx;
			background-color: #fff;
			padding: 80rpx 40rpx;

			.form {
				.forms-item {
					margin-bottom: 60rpx !important;
				}

				.forget-pwd {
					margin: 50rpx 0;
				}

				.button {
					margin-top: 100rpx;
					border-radius: 100rpx;

					.button:after {
						border: 1px solid transparent !important;
					}

				}
			}
		}
	}
</style>